import React,{useState,useEffect,useRef} from "react";
import LlxTable from 'components/LlxTable'
import LlxForm from 'components/LlxForm/index'
import { Form,Button,Select,Cascader,Tag,Modal,DatePicker,Alert} from 'antd';

import { Tooltip,Image} from 'antd';

import {materialAllWord} from 'api/index'
import classNames from "classnames";
const { RangePicker } = DatePicker;


const { SHOW_CHILD } = Cascader;


function AddWordFullDialog(props) {
  const {isModalVisible, setIsModalVisible,dictionaries,title,multipleType,userName,setSelectWords} = props

  const [form] = Form.useForm();
  
  const [loading,setLoading] = useState(false)
  const [total,setTotal] = useState(0)

  useEffect(()=>{
    isModalVisible&&getNewList()
  },[isModalVisible])// eslint-disable-line react-hooks/exhaustive-deps

  let columns = [
    {title: '单词', dataIndex: 'wordName', key: 'wordName', align: 'center',render: (text, record) => {
      return <div className="operate_link_group text-nowrap">
        {text}
     </div>
   }},
    {title: '词性', dataIndex: 'pofName', key: 'pofName', align: 'center'},
    {title: '状态', dataIndex: 'wordStatus', key: 'wordStatus', align: 'center'},
    {title: '级别', dataIndex: 'levelName', key: 'levelName', align: 'center'},
    {title: '标签', dataIndex: 'labels', key: 'labels',width:150, align: 'center', render: (text, record) => {
     return <div className="operate_link_group text-nowrap">
      {record.labels?.map((i,j)=>{
        return   <Tooltip key={i.id} placement="top" title={text.map(i=>i.labelName).join(' ')}>
         {
           j<3?<Tag key={i.id} color="green">{i.labelName}</Tag>:''
         }
          </Tooltip>
      })}
    </div>
  }},
  {title: '卡通', dataIndex: 'picture', key: 'picture',width:150, align: 'center', render: (text, record) => {
      return <div className="operate_link_group text-nowrap photo-list">
       {record.picture?record.picture.map((i,j)=>{
         return  j<3?<Image
         key={j}
         width={40}
         src={i.pictureUrl}
       />:''
       }):''}
     </div>
   }},
   {title: '写实', dataIndex: 'pictures', key: 'pictures',width:150, align: 'center', render: (text, record) => {
    return <div className="operate_link_group text-nowrap photo-list">
        {record.pictures?record.pictures.map((i,j)=>{
         return   j<3?<Image
         key={j}
         width={40}
         src={i.pictureUrl}
       />:''
       }):''}
     </div>
 }},
    {title: '创建人', dataIndex: 'createBy', key: 'createBy', align: 'center',render: (text, record) => {
      return <div className={classNames(userName===text?'operate_link_group text-nowrap text-color-red':"operate_link_group text-nowrap")}>
        {text}
     </div>
   }},
    {title: '更新人', dataIndex: 'updateBy', key: 'updateBy', align: 'center',render: (text, record) => {
      return  <div className={classNames(userName===text?'operate_link_group text-nowrap text-color-red':"operate_link_group text-nowrap")}>
      {text}
   </div>
   }},
    {title: '更新时间', dataIndex: 'updateTime', key: 'updateTime', align: 'center',width:150},
    {title: '操作',fixed:'right', dataIndex: 'operate', key: 'operate', align: 'center',width:100,render:(text, record)=>{
      return  <div className="text-link" onClick={()=>selectWord(record.id,record)}>
       选择此单词
     </div>
    }}
  ]
   
  // 判断单选还是多选去掉操作一栏
  if(multipleType){
    columns = columns.filter(i=>i.title!=='操作')
  }

  //分页数据
  const [pagination,setPagination] = useState({
    current:1,
    pageSize:20
  })

  //初始表格数据
  const [dataSource,setDataSource] = useState([])
  
  // 搜索表单
  const newItem = [
    {label: '名称',type:'input', name: 'wordName', span: 4 },
    {label: '词性', name: 'pofId' , span: 5 ,render: () => {
      return <Select
      allowClear
      optionFilterProp="dictValue"
      showSearch
      fieldNames={{value:'id',label:'dictValue'}}
      placeholder={'请选择词性'}
      options={dictionaries.PartOfSpeech}
    >
    </Select>
  }},
    {label: '级别', name: 'levelId' , span: 5,render: () => {
      return <Select
      allowClear
      optionFilterProp="dictValue"
      showSearch
      fieldNames={{value:'id',label:'dictValue'}}
      placeholder={'请选择级别'}
      options={dictionaries.Level}
    >
    </Select>
  } },
    {label: '创建人', name: 'createBy',  span: 5 ,render: () => {
      return <Select
      allowClear
      optionFilterProp="userName"
      showSearch
      fieldNames={{value:'userName',label:'userName'}}
      placeholder={'请选择创建人'}
      options={dictionaries.UserSpecies}
    >
    </Select>
  }},
    {label: '更新人', name: 'updateBy',  span: 5 ,render: () => {
      return <Select
      allowClear
      optionFilterProp="userName"
      showSearch
      fieldNames={{value:'userName',label:'userName'}}
      placeholder={'请选择更新人'}
      options={dictionaries.UserSpecies}
    >
    </Select>
  }},
  {label: '标签', name: 'label' , span: 4,render: () => {
    return <Cascader  maxTagCount="responsive" showCheckedStrategy={SHOW_CHILD} fieldNames={{value:'id',label:'labelName'}} options={dictionaries.Label} multiple placeholder="请选择标签" />
  } },
    {label: '更新时间', name: 'updateTime', span: 5 ,render: () => {
      return  <RangePicker showTime onChange={getUpdateTime} style={{width:'100%'}}/>
  }}
  ]

  //选择数据
  const [selectedRowKeys,setselectedRowKeys] = useState([])
  const rowSelection  = useRef({
    selectedRowKeys: selectedRowKeys,
    onChange: value => {
    setselectedRowKeys(value)
    rowSelection.current.selectedRowKeys = value
    }
  })
 
  // 用户点击选择将数据返回
  const selectWord = (value,data) => {
    if(multipleType){
      // 多选
      setSelectWords(dataSource.filter(i=>selectedRowKeys.includes(i.id)))
    } else {
      // 单选
      setSelectWords(value,data)
    }
  }
  
  // 获取数据
  const getNewList = async(value) => {
    setLoading(true)
    const params = form.getFieldValue()
    params.currPage=value&&value.pageSize?value.current:pagination.current
    params.pageSize=value&&value.pageSize?value.pageSize:pagination.pageSize
    params.labels = params.label?params.label.map(i=>{
      return {id:i[1]}
    }):[]
    
    const res = await materialAllWord(params)

    const data = res.result.records || []

    data.forEach((i,y)=>{
      i.picture = i.wdWordPictures ? i.wdWordPictures.filter(i => i.pictureType === '1') : [] //卡通
      i.pictures = i.wdWordPictures ? i.wdWordPictures.filter(i => i.pictureType === '0') : []//写实
    })
     
    setTotal(res.result.total)

    setDataSource(data)

    setTimeout(()=>{
      setLoading(false)
    },500)
  }
  
  // 关闭
  const onCancel = () => {
    setIsModalVisible(false)
  }

    // 获取时间
  const getUpdateTime = (value,dataString) => {
  const data = form.getFieldValue()
  data.startTime=dataString[0]
  data.endTime=dataString[1]
  form.setFieldsValue(data)
  }
  
  
  return   <Modal  wrapClassName="modal-full"   visible={isModalVisible} footer={null} onCancel={onCancel}>
        
        <div className="full-modal-title">
          <Alert message={title} type="success" />
        </div>
       
       {/* 搜索表单加表格 */}
       <LlxForm form={form} labelCol={7} formItem={newItem} />

       <div style={{marginBottom:'10px'}}>
         <Button type={'primary'} onClick={getNewList}>查询</Button>
        {
           multipleType?<Button disabled={!selectedRowKeys.length} style={{marginLeft:'20px'}} type={'primary'} onClick={selectWord}>添加选中的单词</Button>:''
        }
       </div>

       {
         multipleType?<LlxTable
         loading={loading} 
         pagination={pagination}
         setPagination={setPagination}
         selectedRowShow={true}
         rowSelection={rowSelection.current}
         height={360}
         total={total}
         getNewList={getNewList}
         columns={columns}
         dataSource={dataSource}/>:<LlxTable
         loading={loading} 
         pagination={pagination}
         setPagination={setPagination}
         selectedRowShow={true}
         height={360}
         total={total}
         getNewList={getNewList}
         columns={columns}
         dataSource={dataSource}/>
       }
   </Modal>
}

export default AddWordFullDialog